<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      layout:decorator="layout/pc_master">
<div layout:fragment="content" class="section page-content">
<style type="text/css">
    .layui-form-label { width: 150px; }
    .layui-input-block { margin-left:150px; }

    .layui-input, .layui-select, .layui-textarea { border-color:#EEE; border-radius: 5px; color: var(--color) }

    .mulselect_box .layui-unselect{ width: 150px; display: inline-block; }

    .page_manage_singlephoto .photo-previews {
        width: 280px;
        height: 280px;
        background-size: cover;
        display: inline-block;
        border-radius: 10px;
        background-position: center;
    }
</style>
    <input type="hidden" name="filedir" id="filedir" th:value="head_img">
    <!-- s: 导航 -->
    <div class="breadcrumb-wrap">
        <div class="layui-main clearfix">
            <div class="breadcrumb">
                <a href="/">首页</a> - <a href="/center">用户中心</a> - 单身资料
            </div>
        </div>
    </div>
    <!-- e: 导航 -->

    <div class="section page-content">
        <div class="layui-main clearfix">

         <div th:include="layout/center_left :: center_left" class="manage-aside"></div>

        <div class="manage-main">
            <ul class="layui-nav nav main-nav">
                <li class="layui-nav-item ">
                    <a href="/center/single/info">
                        基本资料
                    </a>
                </li>
                <li class="layui-nav-item ">
                    <a href="/center/single/mate">
                        择偶标准
                    </a>
                </li>
                <li class="layui-nav-item layui-this">
                    <a href="/center/single/photo">
                        头像
                    </a>
                </li>
                <li class="layui-nav-item ">
                    <a href="/center/single/show">
                        个性展示
                    </a>
                </li>
            </ul>

            <div class="main-content">

                <div th:if="${singles.photoCheck eq 3}" class="bcui-alert bcui-alert-warning">提示：您的头像正在审核中，请耐心等待～</div>

                <form class="layui-form" action="/m/ajax/center/single/pc_modify" bottlecms-form-ajax="" refresh="" method="post">
                    <div class="photobox" style="padding:50px 0;text-align: center;">
                        <img class="photo-previews" width="200" height="200" th:src="${singles.photo}+'_600x600.jpg'">
<!--                        <div class="photo-previews" style="background-image: url(https://cdn.demo.bottlecms.com/uploads/original/20210105/a8bf8ec3066fbc114f67e7ec93da0c45.jpeg)">-->
<!--                        </div>-->

                        <div style="padding: 8px;">请上传本人真实正脸照</div>

                        <!-- <div class="layui-form-item">
<label class="radio-inline c-radio"><input bottlecms-radio type="radio" name="photo_mode" value="1" checked="checked"  title="清晰显示"></label><label class="radio-inline c-radio"><input bottlecms-radio type="radio" name="photo_mode" value="2"   title="模糊显示"></label>
</div> -->

                        <div class="layui-upload">
                            <input bottlecms-input="" type="hidden" name="photo" th:value="${singles.photo}">
                            <button type="button" class="layui-btn layui-btn-radius layui-btn-warm uploadbtn-photo" accept="image/*" data-function="upphoto" data-values="#photo">上传图片</button><input class="layui-upload-file" type="file" accept="undefined" name="file">
                        </div>


                        <div style="margin-top: 50px;">
                            <button class="layui-btn layui-btn-default layui-btn-radius layui-btn-lg" lay-submit="">确认提交</button>
                        </div>
                    </div>


                </form>

            </div>

        </div>


        </div>
    </div>

</div>
<div layout:fragment="contentFooter">
    <script>
        bottlecms.layuiuploadfile({
            elem:".uploadbtn-photo",
            success:function(pic){
                $(this.elem).prev('input').val(pic);
                $('#photo').val(pic);
                $(".photo-previews").attr("src",pic);
                $('.photosubmitbox').show();
            }
        });
    </script>
</div>
</html>